<template>
  <div class="multi-select-container">
    <!-- 选择器触发区域 -->
    <div class="selector-trigger" @click="showPopup = true">
      <div class="input-wrapper">
        <span class="label" :class="{ required: required }">{{ label }}</span>
        <div class="selected-text">
          {{ selectedText || placeholder }}
        </div>
        <div class="arrow-icon">
          <i class="arrow-down"></i>
        </div>
      </div>
    </div>

    <!-- 遮罩层 -->
    <div class="popup-mask" v-if="showPopup" @click="closePopup"></div>

    <!-- 弹出选择框 -->
    <div class="popup-container" v-if="showPopup">
      <div class="popup-header">
        <div class="popup-title">{{ title || "请选择" }}</div>
        <div class="close-icon" @click="closePopup">×</div>
      </div>

      <div class="popup-content">
        <div
          v-for="item in options"
          :key="item.id"
          class="option-item"
          :class="{ active: isSelected(item.id) }"
          @click="toggleSelect(item.id)"
        >
          <div class="option-text">{{ item.name }}</div>
          <div class="checkbox" :class="{ checked: isSelected(item.id) }">
            <i class="check-icon" v-if="isSelected(item.id)">✓</i>
          </div>
        </div>
      </div>

      <div class="popup-footer">
        <button class="cancel-btn" @click="closePopup">取消</button>
        <button class="confirm-btn" @click="confirmSelection">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";

// 定义组件属性
const props = defineProps({
  // 选择器标签
  label: {
    type: String,
    default: "关联品牌",
  },
  // 是否必选
  required: {
    type: Boolean,
    default: false,
  },
  // 占位提示文字
  placeholder: {
    type: String,
    default: "请选择",
  },
  // 弹窗标题
  title: {
    type: String,
    default: "请选择",
  },
  // 帮助文字
  helperText: {
    type: String,
    default: "点击弹出选择控件，支持多选",
  },
  // 选项数据，格式: [{id: 1, name: '品牌1'}, ...]
  options: {
    type: Array,
    default: () => [],
  },
  // 已选中的id数组（双向绑定）
  modelValue: {
    type: Array,
    default: () => [],
  },
});

// 定义事件
const emit = defineEmits(["update:modelValue", "change"]);

// 弹窗显示状态
const showPopup = ref(false);

// 临时选中状态（确认前的选择）
const tempSelected = ref([]);

// 监听modelValue的变化
watch(
  () => props.modelValue,
  (newVal) => {
    tempSelected.value = [...newVal];
  },
  { immediate: true, deep: true }
);

// 计算已选择的文本描述
const selectedText = computed(() => {
  if (!props.modelValue || props.modelValue.length === 0) return "";

  return props.options
    .filter((item) => props.modelValue.includes(item.id))
    .map((item) => item.name)
    .join("、");
});

// 判断某个选项是否被选中
const isSelected = (id) => {
  return tempSelected.value.includes(id);
};

// 切换选中状态
const toggleSelect = (id) => {
  const index = tempSelected.value.indexOf(id);
  if (index === -1) {
    tempSelected.value.push(id);
  } else {
    tempSelected.value.splice(index, 1);
  }
};

// 确认选择
const confirmSelection = () => {
  emit("update:modelValue", [...tempSelected.value]);
  emit("change", [...tempSelected.value]);
  closePopup();
};

// 关闭弹窗
const closePopup = () => {
  showPopup.value = false;
  // 重置临时选择为当前实际选择
  tempSelected.value = [...props.modelValue];
};
</script>

<style scoped>
.multi-select-container {
  position: relative;
  width: 100%;
  font-size: 28rpx;
}

.selector-trigger {
  width: 100%;
}

.input-wrapper {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1px solid #ebeef5;
  position: relative;
}

.label {
  width: 180rpx;
  font-size: 28rpx;
  color: #333;
}

.required::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4rpx;
}

.selected-text {
  flex: 1;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arrow-icon {
  padding: 0 20rpx;
}

.arrow-down {
  display: inline-block;
  width: 16rpx;
  height: 16rpx;
  border-right: 2rpx solid #999;
  border-bottom: 2rpx solid #999;
  transform: rotate(45deg);
}

.helper-text {
  font-size: 24rpx;
  color: #1989fa;
  text-align: right;
  padding: 10rpx 0;
}

/* 弹出层样式 */
.popup-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.popup-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  z-index: 1000;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #ebeef5;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-icon {
  font-size: 40rpx;
  color: #999;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0 30rpx;
}

.option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #ebeef5;
}

.option-item.active {
  color: #1989fa;
}

.option-text {
  font-size: 28rpx;
}

.checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 1px solid #dcdfe6;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox.checked {
  background-color: #1989fa;
  border-color: #1989fa;
  color: #fff;
}

.check-icon {
  font-size: 24rpx;
  font-weight: bold;
}

.popup-footer {
  display: flex;
  padding: 20rpx 30rpx;
  border-top: 1px solid #ebeef5;
}

.cancel-btn,
.confirm-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10rpx;
  font-size: 28rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
}

.confirm-btn {
  background-color: #1989fa;
  color: #fff;
}
</style>
